<template>
  <div class="introduce">
    <el-breadcrumb separator="/">
      <el-breadcrumb-item :to="{ path: '/' }">博客首页</el-breadcrumb-item>
      <el-breadcrumb-item><a href="javascript:;">{{singleIntroduce.title}}</a></el-breadcrumb-item>
    </el-breadcrumb>
    <h1 class="title">{{singleIntroduce.title}}</h1>
    <div class="other">
      <div><span class="icon-yonghu iconfont"></span>empty</div>
      <div><span class="icon-riqi iconfont"></span>{{parseFloat(singleIntroduce.date) | dateFormat}}</div>
    </div>
    <div class="content">
      <div class="information" v-if="singleIntroduce.information">
        <span>个人资料：</span>{{singleIntroduce.information}}
      </div>
      <div class="hobby" v-if="singleIntroduce.hobby">
        <span>爱好：</span>
        <el-tag
          v-for="(item,index) in singleIntroduce.hobby"
          :key="index"
          :type="tags[index]"
          effect="dark"
          size="mini">
          {{item}}
        </el-tag>
      </div>
      <div v-if="singleIntroduce.hobby"><span>个人简介：</span></div>
      <pre>{{singleIntroduce.content}}</pre>
    </div>
    <div class="picture">
      <img :src="singleIntroduce.picture" alt="加载失败">
    </div>
  </div>
</template>

<script>
  import {mapState} from 'vuex'

  export default {
    name: "introduce",
    data() {
      return {
        tags: ['', 'success', 'info', 'danger', 'warning','success','info']
      }
    },
    computed: {
      ...mapState(['singleIntroduce'])
    }
  }
</script>

<style scoped lang="less">
  .introduce {
    width: 800px;
    margin: auto;

    .title {
      text-align: center;
      font-size: 30px;
      margin-top: 20px;
    }

    .other {
      overflow: hidden;
      border-bottom: 1px solid #606266;

      div {
        float: left;
        color: #7D7D7D;
        font-size: 14px;
        margin: 20px 10px 10px;

        span {
          font-size: 18px;
          display: inline-block;
          margin-right: 5px;
          vertical-align: middle;
        }
      }
    }

    .content {
      color: #c0c4cc;
      margin-top: 20px;

      span {
        color: white;
      }

      div {
        margin-bottom: 10px;
      }

      .el-tag {
        margin-right: 10px;
      }

      pre {
        margin-top: 10px;
        text-indent: 2em;
        background: #222222;
        box-shadow: 0 1px 1px #000 inset, 0 1px 1px #fff;
        padding: 20px 100px;
        width: 800px;
      }
    }

    .picture {
      width: 600px;
      margin: 20px auto;

      img {
        width: 100%;
      }
    }
  }
</style>